Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會展開使用 Avalonia UI 技術所建立的 TopAOAIConnector App 。由於使用 Avalonia UI 可以很快速的進行各平台的 桌面 應用程式開發，並且透過此 TopAOAIConnector App 來串接 Azure OpenAI Service 時所需的功能研究。

本篇是 就是要來點 A.I. 的 TopAOAIConnector App 系列文的 EP27。

在 EP 26 調整了 2 點比較明顯的使用困擾外，其實還有使用的困擾比較難發現：

1. 若想要 "複製" 回應或是先前輸入的訊息時，以目前的 TextBlock 設計是沒辦法處理的。
2. 若附加檔案的內容文字較多時，會造成 ChatText 顯示過多不必要的文字。

在本回來處理一下上述這兩點問題吧！

關於第一點的問題：

當在 Chat 的內容想要直接 "選取" 複製時，會發現無法處理，因為原本設計在 ChatPage 的 ScrollViewer 中的是 TextBlock。

而若熟悉 Avalonia UI 的相關 Library 的話，其實調整上很單純，把原本的 TextBlock 設計改用 SelectableTextBlock 即便可以處理此問題。

調整完成如下圖紅框：

測試其調整效果：

關於第二點問題：

當附加檔案的文字內容頗多時，看起來就會有點顯得弔詭。

在這邊可以處理的一種方式是把附加檔案的文字顯示所有內容時做一些預處理，如果內容太長就中略，留下開頭與結尾的一部份文字顯示出來即可。

所以找到 ViewModels/ChatPageViewModel.cs 的 ChatPageViewModel 類別當中的 Attach 方法，在

var isInputTextEmpty = string.IsNullOrEmpty(InputText);

var textContent = isInputTextEmpty ? fileContent : $"{InputText}{Environment.NewLine}{fileContent}";

messages.Add(textContent);

加入一段判斷式：

if (fileContent.Length > 750)
{
    fileContent = $"{fileContent[..500]}{Environment.NewLine}{Environment.NewLine}" +
                    $"...略...{Environment.NewLine}{Environment.NewLine}" +
                    $"{fileContent[(fileContent.Length - 250)..fileContent.Length]}";
}

調整完成如下圖紅框：

當附加的文字內容超過 750 字時，則會顯示文字內容開頭 500 字與結尾 250 字，中間內容呈現 "...略..."。

完成！！！